import { Button, Tooltip } from 'antd';
import { ProColumnType } from '@ant-design/pro-table';
import { ProFormText } from '@ant-design/pro-form';
import { fetchReturnBookList } from '@/service/returnBook';
import { ReturnBookState } from './interface';
import { PageConfigParams } from '@/components/SearchAndTable/interface';
import SearchAndTable from '@/components/SearchAndTable';
import DefaultCollapseHeader from '@/components/SearchAndTable/components/DefaultCollapseHeader';
import { history } from 'umi';
import { RequestParams } from '../borrowBook/interface';
import { isNil, omitBy } from 'lodash';
import { Link } from 'umi';
import qs from 'query-string';
import { EyeTwoTone } from '@ant-design/icons';
import useAutoInjectCatelog from '../borrowBook/hooks/useAutoInjectCatelog';

const rawColumns: ProColumnType<ReturnBookState>[] = [
    {
        title: '订单编号',
        key: 'order_no',
        dataIndex: 'order_no',
    },
    {
        title: 'RFID编号',
        key: 'rfid',
        dataIndex: 'rfid',
    },
    {
        title: 'ISBN编号',
        key: 'isbn',
        dataIndex: 'isbn',
    },
    {
        title: '书名',
        key: 'book_name',
        dataIndex: 'book_name',
    },
    {
        title: '作者',
        key: 'author',
        dataIndex: 'author',
        hideInSearch: true,
    },
    {
        title: '类别',
        key: 'cate_id',
        dataIndex: 'cate_id',
        valueType: 'select',
    },
    {
        title: '归还人',
        key: 'return_username',
        dataIndex: 'return_username',
        render: (_, record) => {
            return (
                <Link
                    onClick={(e) => e.stopPropagation()}
                    style={{ color: '#1890ff' }}
                    to={`/personalCenter/${record.return_user_id}`}
                >
                    {record.return_username}
                </Link>
            );
        },
        hideInSearch: true,
    },
    {
        title: '归还量',
        key: 'returnCount',
        dataIndex: 'returnCount',
        hideInSearch: true,
        render: () => 1,
    },
    {
        title: '租赁人',
        key: 'borrow_username',
        dataIndex: 'borrow_username',
        render: (_, record) => (
            <Link
                onClick={(e) => e.stopPropagation()}
                style={{ color: '#1890ff' }}
                to={`/personalCenter/${record.borrow_user_id}`}
            >
                {record.borrow_username}
            </Link>
        ),
    },
    {
        title: '租赁开始时间',
        key: 'rent_time',
        dataIndex: 'rent_time',
        valueType: 'date',
    },
    {
        title: '租赁结束时间',
        key: 'finish_time',
        dataIndex: 'finish_time',
        valueType: 'date',
    },
    {
        title: '租赁人地址',
        key: 'address',
        dataIndex: 'address',
        hideInSearch: true,
    },
    {
        title: '证件类型',
        key: 'no_type',
        dataIndex: 'no_type',
        hideInSearch: true,
        valueType: 'select',
        valueEnum: {
            1: '123',
        },
    },
    {
        title: '证件编号',
        key: 'no',
        dataIndex: 'no',
        hideInSearch: true,
    },
    // {
    //     title: '创建时间',
    //     key: 'createTime',
    //     dataIndex: 'createTime',
    //     hideInSearch: true,
    // },
    {
        title: '操作',
        hideInSearch: true,
        render: (text, record, _, action) => [
            <Tooltip title="查看">
                <EyeTwoTone
                    style={{ padding: '0 5px' }}
                    onClick={(e) => {
                        e.stopPropagation();
                        history.push(`/returnBook/details/${record.id}`);
                    }}
                />
            </Tooltip>,
        ],
    },
];

export default function ReturnBook() {
    const dataSourceRequest = async ({
        pageSize = 10,
        current = 1,
        ...params
    }: PageConfigParams & RequestParams) => {
        const response = await fetchReturnBookList({
            limit: pageSize,
            page: current,
            ...omitBy(params, (v: any) => isNil(v) || v === ''),
        });

        if (response.code !== 200) {
            return {
                total: 0,
                data: [],
            };
        }
        return { ...response.data, total: Number(response.data.total) };
    };

    const { columns } = useAutoInjectCatelog(rawColumns);

    // const toEnrollBookDetails = (record: ReturnBookState) => {
    //     history.push(`/returnBook/details/${record.id}`);
    // };

    return (
        <>
            <SearchAndTable<ReturnBookState, RequestParams>
                columns={columns}
                request={dataSourceRequest}
                renderCollapseHeader={(params) => {
                    return (
                        <DefaultCollapseHeader collapseHeader={params}>
                            <ProFormText
                                disabled={params.collapse}
                                name="rfid"
                                placeholder="请输入RFID标识码"
                            />
                        </DefaultCollapseHeader>
                    );
                }}
                tableProps={{
                    // onRow: (record) => {
                    //     return {
                    //         onClick: (event) => {
                    //             toEnrollBookDetails(record);
                    //         }, // 点击行
                    //     };
                    // },
                    scroll: {
                        x: 1000,
                        y: 500,
                        scrollToFirstRowOnChange: true,
                    },
                }}
            />
        </>
    );
}
